<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- // 请简单实现双向数据绑定 mvvm。 -->
  <input id="input" />
  <div id="showText"></div>
  <button onclick="change()">改变棒棒糖</button>
  <script>
    const data = {};
    const input = document.getElementById('input');
    const text = document.getElementById("showText")
    Object.defineProperty(data, 'text', {
      set(value) {
        console.log(value)
        input.value = value
        text.innerHTML = value
        this.value = value;
      }
    });
    input.oninput = function (e) {
      data.text = e.target.value;
    }
    function change(e) {
      console.log(e)
      data.text = "bangbangtang"
    }
  </script>


  <br />
  <!-- proxy 实现数据流 -->
  <input id="input2" />
  <div id="showText2"></div>
  <button onclick="change2()">改变棒棒糖</button>
  <script>
    const data2 = {};
    const input2 = document.getElementById('input2');
    const text2 = document.getElementById("showText2")
    let proxy = new Proxy(data2, {
      get(target, key, val) {

      },
      set(target, key, val) {
        console.log()
        input2.value = val;
        text2.innerHTML = val;
        return Reflect.set(target, key, val)
      }
    })

    input2.oninput = function (e) {
      console.log(e)
      proxy.text = e.target.value
    }

    function change2() {
      proxy.text = "jiao"
    }
  </script>
</body>

</html>